<template>
  <view class="passRecord">
    <!-- 质检结果 -->
    <view class="resultContent">
      <view class="title">质检结果</view>
      <view class="result" v-if="status == 3 && passObj.checkStatus == -1">
        <image
          src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/016ede4288d7b45e00b7d274a3e8021c.png"
          mode=""
          @click="changeCheckStatus(1)"
        />
        <image
          src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/c86439e3b7536a73fa0025827c69bc59.png"
          mode=""
          @click="changeCheckStatus(2)"
        />
      </view>
      <view class="result" v-if="status == 3 && passObj.checkStatus == 1">
        <image
          src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/70928e62d6e470727389a7e8656a91fe.png"
          mode=""
          @click="changeCheckStatus(1)"
        />
        <image
          @click="changeCheckStatus(2)"
          src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/c86439e3b7536a73fa0025827c69bc59.png"
          mode=""
        />
      </view>
      <view class="result" v-if="status == 3 && passObj.checkStatus == 2">
        <image
          src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/016ede4288d7b45e00b7d274a3e8021c.png"
          mode=""
          @click="changeCheckStatus(1)"
        />

        <image
          src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/d8b8b219022b0928909f7c40e063d230.png"
          mode=""
          @click="changeCheckStatus(2)"
        />
      </view>
      <!-- 已完成 -->
      <view class="lastResult" v-if="status == 4">
        <image
          :src="
            passObj.checkStatus == 1
              ? 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/8e89a74f7cd67cc1bf054bed29713935.png'
              : 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/b60d8450a50fdc4612f2b96936dce6e3.png'
          "
          mode=""
        />
      </view>
    </view>
    <!-- <view class="notic" v-if="passObj.checkStatus == 1">
      <view class="title">备注信息</view>
      <view class="area" v-if="status == 3 && isPlanStatus">
        <textarea
          :value="passObj.passDesc"
          placeholder="请输入备注内容"
          placeholder-class="textare"
          style="font-size: 28rpx; height: 150rpx; width: 100%"
          :maxlength="300"
          :auto-height="true"
          :always-embed="true"
          @input="descConfirm"
          @confirm="comfireNotic"
          @blur="handleBlur"
          confirm-type="完成"
        />
        <view class="length">{{ passObj.passDesc.length + "/300" }}</view>
      </view>
      <view
        v-if="
          status == 4 &&
          passObj.passDesc !== null &&
          passObj.passUrl.length &&
          !isPlanStatus
        "
        style="margin-bottom: 16rpx"
      >
        {{ passObj.passDesc }}
      </view>
      <image-drag-sort
        :max="9"
        @changeList="changeNoticImg"
        :list="passObj.passUrl"
        :disabled="status == 4 || (status == 3 && !isPlanStatus)"
      >
      </image-drag-sort>
    </view> -->
  </view>
</template>

<script>
// import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import { getCheckPass, checkFinish, getCheckNoPass } from '@/apis/affair.js';
export default {
	props: {
		status: {
			type: [Number, String],
		},
		planId: {
			type: [Number, String],
		},
		// 是否签到状态
		isPlanStatus: {
			type: Boolean,
		},
		detailId: {
			type: [String, Number],
		},
		checkStatus: {
			type: [String, Number],
			default: -1,
		},
		msg: {
			type: Object,
		},
	},

	components: {
		// ImageDragSort,
	},
	watch: {
		// async checkStatus(val) {
		//   console.log(val, "checkStatus的值");
		//   if (val == 1) {
		//     let data = await this.getCheckPassFun();
		//     this.passObj.passDesc = data.passDesc;
		//     this.passObj.passUrl = data.passUrl;
		//   }
		// },
	},
	async created() {
		console.log('加载');
		this.passObj.checkStatus = this.checkStatus;
		console.log(this.passObj.checkStatus, 'this.passObj.checkStatus');

		// if (this.checkStatus == 1) {
		//   let data = await this.getCheckPassFun();
		//   this.passObj.passDesc = data.passDesc;
		//   this.passObj.passUrl = data.passUrl;
		//   console.log(this.passObj);
		// }
	},
	data() {
		return {
			passObj: {
				passDesc: '',
				passUrl: [],
				checkStatus: '',
			},
			// 通过未选中,不通过未选中,通过选中,不通过选中,状态4通过
			list: [
				'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/016ede4288d7b45e00b7d274a3e8021c.png',
				'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/c86439e3b7536a73fa0025827c69bc59.png',
				'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/70928e62d6e470727389a7e8656a91fe.png',
				'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/d8b8b219022b0928909f7c40e063d230.png',
				'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/8e89a74f7cd67cc1bf054bed29713935.png',
				'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231202/b60d8450a50fdc4612f2b96936dce6e3.png',
			],
		};
	},
	methods: {
		async changeNoticImg(val) {
			this.passObj.passUrl = [];
			this.passObj.passUrl = val;
			console.log(JSON.parse(JSON.stringify(val)), '数据');
			checkFinish({
				status: 0,
				checkStatus: 1,
				id: this.detailId,
				passUrl: val,
				passDesc: this.passObj.passDesc,
			}).then(() => {
				console.log(this.passObj, 'data的至');
				// eslint-disable-next-line vue/custom-event-name-casing
				this.$emit('updatePassMsg', this.passObj);
			});
		},
		async handleBlur() {
			console.log('失焦', this.passObj);
			await this.handleCheckFinish();
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('updatePassMsg', this.passObj);
		},
		async comfireNotic() {
			console.log('点击确定');
			await this.handleCheckFinish();
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('updatePassMsg', this.passObj);
		},
		// 获取通过的方法
		getCheckPassFun() {
			return new Promise((resolve) => {
				getCheckPass({ planId: this.planId }).then((res) => {
					// console.log(res.data, "获取工单");
					resolve(res.data);
				});
			});
		},
		// 获取质检不通过内容
		getCheckNoPassFun() {
			return new Promise((resolve) => {
				getCheckNoPass({ planId: this.planId, groupId: 0 }).then((res) => {
					resolve(res.data);
				});
			});
		},
		// 上传通过
		handleCheckFinish() {
			return new Promise((reslove) => {
				checkFinish({
					status: 0,
					checkStatus: 1,
					id: this.detailId,
					passUrl: this.passObj.passUrl,
					passDesc: this.passObj.passDesc,
				}).then(() => {
					reslove({});
				});
			});
		},
		async changeCheckStatus(res) {
			// console.log(res,"res的至") 
			if (!this.isPlanStatus) {
				uni.showToast({
					title: '请先签到开始,再进行操作',
					icon: 'none',
					mask: true,
				});
				return;
			}
			this.passObj.checkStatus = res;
			let noPassList = await this.getCheckNoPassFun();
			checkFinish({
				status: 0,
				checkStatus: res,
				id: this.detailId,
			}).then(() => {
				// console.log(res,"上传不通过")
			});
			if (noPassList.length) {
				// eslint-disable-next-line vue/custom-event-name-casing
				this.$emit('changePass', this.passObj.checkStatus, noPassList);
			} else {
				// eslint-disable-next-line vue/custom-event-name-casing
				this.$emit('changePass', this.passObj.checkStatus, noPassList);
			}
		},
		descConfirm(e) {
			if (e.detail.value.length >= 300) {
				this.passObj.passDesc = e.detail.value.substring(0, 300);
			} else {
				this.passObj.passDesc = e.detail.value;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.passRecord {
  .resultContent {
    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      padding-bottom: 22rpx;
      display: flex;
      align-items: center;
    }
    margin-bottom: 20rpx;
    padding: 28rpx 20rpx;
    border-radius: 8rpx;
    background: #fff;
  }
  .result {
    display: flex;
    image {
      width: 336rpx;
      height: 80rpx;
    }
  }
  .lastResult {
    display: flex;
    justify-content: center;
    image {
      width: 160rpx;
      height: 160rpx;
    }
  }
  .notic {
    .title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      padding-bottom: 22rpx;
      display: flex;
      align-items: center;
    }
    margin-bottom: 20rpx;
    padding: 28rpx 20rpx;
    border-radius: 8rpx;
    background: #fff;
    // width: 100%;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
    text {
      color: #e54b4b;
    }
    .name {
      display: flex;
      font-size: 26rpx;
      color: #333;
      margin-bottom: 16rpx;
    }
    .area {
      padding: 20rpx;
      border: 2rpx solid #e9e9e9;
      margin-bottom: 20rpx;
    }
  }
  textarea {
    font-size: 28rpx;
  }
  .length {
    text-align: right;
    // padding-bottom: 20rpx;
    color: #ccc;
  }
}
</style>
